<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title id='title'>HTML Page setup Tutorial</title>
 
        <!-- ** CSS ** -->
        <link rel="stylesheet" type="text/css" href="/worldbank/lib/ext-3.3.1/resources/css/ext-all.css" />

        <!-- this is for the local host -->
       <script src="http://maps.google.com/maps?file=api&v=3.x&key=ABQIAAAA2CKu_qQN-JHtlfQ5L7BLlRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQl3I3p2yrGARYK4f4bkjp9NHpm5w" type="text/javascript"></script>

        <!-- base library -->
        <script type="text/javascript" src="/worldbank/lib/ext-3.3.1/adapter/ext/ext-base.js"></script>

        <!-- overrides to base library -->
        <!--
        <script type="text/javascript" src="/lib/jquery-1.4.4.js"></script>
        -->
 
        <!-- ** Javascript ** -->
        <!-- ExtJS library: base/adapter -->
	<!-- <script type="text/javascript" src="/worldbank/lib/ext-3.3.1/adapter/jquery/ext-jquery-adapter.js"></script> -->

        <!-- ExtJS library: all widgets -->
        <script type="text/javascript" src="/worldbank/lib/ext-3.3.1/ext-all.js"></script>

        <script type="text/javascript" src="/worldbank/extjs_version/js/ux/WorldBank.js"></script>
        <script type="text/javascript" src="/worldbank/extjs_version/js/ux/WorldBankComponent.js"></script>
        <script type="text/javascript" src="/worldbank/extjs_version/js/ux/GVisualizationPanel.js"></script>
        <script type="text/javascript" src="/worldbank/extjs_version/js/ux/RemoteComponent.js"></script>
 

       <!-- overrides to library -->
        <script type="text/javascript" src="/worldbank/extjs_version/js/ux/GVisualizationPanel.js"></script>
 
        <script type="text/javascript" src="http://www.google.com/jsapi"></script> 

        <script type="text/javascript">
        // Path to the blank image should point to a valid location on your server
        Ext.BLANK_IMAGE_URL = '/worldbank/lib/ext-3.3.1/resources/images/default/s.gif';
 
        Ext.onReady( function() {

    var ds = new Ext.data.Store({
        url: './json/SP.POP.TOTL',
        autoLoad: true,
        reader: new Ext.ux.data.wbReader({
            root: 'results',
            totalProperty: 'total',
            fields: [{name: 'country', mapping: 'country'},
                     {name: 'value', mapping: 'value'},
                     {name: 'date', mapping: 'date'}
            ]
        }),
        listeners:{
           load:{ scope:this, fn:function(store) {
               console.log("listners load for data store");
               console.log(store);
               Ext.each(store.data.items, function(val, key) {
                   console.log(val);
                   console.log(key);
               });
    		}}
    	}
    });

               /*
var store = new Ext.data.Store( {
    url: './json/SP.POP.TOTL',
    autoload: true,
    reader: new Ext.ux.data.wbReader({
        root: 'results',
        fields: [{name: 'country', mapping: 'country'},
                 {name: 'value', mapping: 'value'},
                 {name: 'date', mapping: 'date'}
        ]
    }),
    listeners : {
        beforeload : function( store, options ) {
        }
    }
});

var timeline = new Ext.ux.GVisualizationPanel({
	renderTo: 'dow-highlights',
	id: 'timeline',
	visualizationPkg: {'annotatedtimeline': 'AnnotatedTimeLine'},
	visualizationCfg: {
		allowHtml: true,
		displayAnnotations: true,
		displayExactValues: true,
		wmode: 'transparent'
	},
	height: 400,
	title: 'Greatest DJIA Daily Point Gains',
	store: store,
	columns: [
		{
			dataIndex: 'pointDate',
			label: 'Date'
		},
		{
			dataIndex: 'pointClose',
			label: 'Close'
		},
		{
			dataIndex: 'pointNetChg',
			label: 'Net Chg'
		},
		{
			dataIndex: 'pointPctChg',
			label: 'Pct Chg'
		},
		{
			dataIndex: 'pointNews'
		}
	]
});
*/
            console.log( Ext.get('center2').dom.innerHTML );
            // get a reference to the HTML element with id "hideit" and add a click listener to it 
            Ext.get("hideit").on('click', function(){
                // get a reference to the Panel that was created with id = 'west-panel' 
                var w = Ext.getCmp('west-panel');
                // expand or collapse that Panel based on its collapsed property state
                w.collapsed ? w.expand() : w.collapse();
            });

           console.info('woohoo!!!');
 
        }); //end onReady
        </script>
 
    </head>
    <body>

    <div id="header">
        <div id="languages"></div>
        <!-- <div style="float:right;margin:5px;" class="x-small-editor"><input type="text" id="search" /></div> -->
    </div>

<div class="entry">
					<div id="dow-highlights"></div>
				</div>

    <!-- use class="x-hide-display" to prevent a brief flicker of the content -->
    <div id="west" class="x-hide-display">
        <p>Hi. I'm the west panel.</p>
    </div>

    <div id="center2" class="x-hide-display">
        <a id="hideit" href="#">Toggle the west region</a>
        <p>The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p>
        <hr>
    </div>
    <div id="center1" class="x-hide-display">
        <p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
    </div>

    <div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">
    </div>

    <div id="south" class="x-hide-display">
        <p>south - generally for informational stuff, also could be for status bar</p>
    </div>

    <div id="footer">
        <div id=""></div>
    </div>

    </body>
</html>
